<template>
  <div class="bg-#0B0B0B rounded-5px w-402px p-30px relative">
    <img
      src="/logo.png"
      alt=""
      class="absolute z-10 top--50px left-50% transform-translate-x--50%"
    >
    <ELFormRenderer v-model="loginForm" :content="content">
      <div class="flex justify-center">
        <el-button
          class="w-full bg-black border-transparent text-#ffffff"
          @click="handleLogin"
        >
          登录
        </el-button>
      </div>
      <div class="flex justify-between py-10px">
        <el-checkbox> 下次自动登录 </el-checkbox>
        <div>
          <span>忘记密码 </span>
          <span>|</span>
          <span>注册</span>
        </div>
      </div>
      <div class="text-center">第三方账号登录</div>
      <div class="flex justify-center mt-20px">
        <div
          class="w-46px h-46px flex items-center justify-center bg-#DDDDDD rounded-50% m-20px"
        >
          <img src="/wechat.png" alt="">
        </div>
        <div
          class="w-46px h-46px flex items-center justify-center bg-#DDDDDD rounded-50% m-20px"
        >
          <img src="/QQ.png" alt="">
        </div>
        <div
          class="w-46px h-46px flex items-center justify-center bg-#DDDDDD rounded-50% m-20px"
        >
          <img src="/weibo.png" alt="">
        </div>
      </div>
      <div class="text-center">
        <span class="text-#A5AAB1">登录或注册即代表同意</span>
        <span class="text-#B1ACE6">用户协议</span>
        <span class="text-#A5AAB1"> 和 </span>
        <span class="text-#B1ACE6">个人信息保护政策</span>
      </div>
    </ELFormRenderer>
  </div>
</template>

<script>
import ELFormRenderer from '@femessage/el-form-renderer'
export default {
  components: {
    ELFormRenderer
  },
  layout: 'loginLayout',
  data () {
    return {
      loginForm: {},
      content: [
        {
          id: 'account',
          type: 'input',
          label: '',
          el: {
            placeholder: '手机号'
          }
        },
        {
          id: 'password',
          type: 'input',
          label: '',
          el: {
            type: 'password',
            placeholder: '密码'
          }
        }
      ]
    }
  },
  mounted () {
    console.log(this, 'thi')
  },
  methods: {
    handleLogin () {
      if (!this.loginForm.account) {
        return this.$message.warning('请输入手机号码')
      }
      if (!this.loginForm.password) {
        return this.$message.warning('请输入密码')
      }
      this.$auth
        .loginWith('local', {
          data: { ...this.loginForm }
        })
        .then((response) => {
          if (response.code !== 1) {
            this.$message.error(response.msg)
            return
          }
          this.$auth.setUser(response.data.userinfo)
          this.$router.push('/')
        })
        .catch((error) => {
          console.log(error)
        })
      // this.$axios.post('/User/login', { account: '13306036053', password: 'aa123123' }).then((response) => {
      //   console.log('login', response)
      // })
    }
  }
}
</script>

<style>
</style>
